<template>
  <div>
    <div class="goods">
      <div class="menu-wrapper" ref="menuWrapper">
        <ul>
          <li
            class="menu-item"
            v-for="(item, index) in goods"
            :key="index"
            :class="{ current: currentIndex === index }"
            @click="selectItem(index)"
          >
            <span class="text">
              <support-ico
                v-if="item.type > -1"
                :size="1"
                :type="item.type"
              ></support-ico>
              {{ item.name }}
            </span>
          </li>
        </ul>
      </div>
      <div class="foods-wrapper" ref="foodsWrapper">
        <ul>
          <li
            class="food-list"
            v-for="(item, index) in goods"
            :key="index"
            ref="foodList"
          >
            <h1 class="title">{{ item.name }}</h1>
            <ul>
              <li
                class="food-item"
                v-for="(food, index) in item.foods"
                :key="index"
              >
                <div class="icon">
                  <img :src="food.image" alt="" />
                </div>
                <div class="content">
                  <h2 class="name">{{ food.name }}</h2>
                  <p class="desc">{{ food.description }}</p>
                  <div class="extra">
                    <span class="count">月售{{ food.sellCount }}份</span>
                    <span>好评{{ food.rating }}%</span>
                  </div>
                  <div class="price">
                    <span class="now">￥{{ food.price }}</span>
                    <span class="old" v-if="food.oldPrice.length"
                      >￥{{ food.oldPrice }}</span
                    >
                  </div>

                  <!-- + -->
                  <div class="cartcontrol-wrapper">
                    <cart-control :food="food"></cart-control>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <!-- 购物车 -->
    <shopCart
      :selectFoods="selectFoods"
      :deliveryPrice="seller.deliveryPrice"
      :minPrice="seller.minPrice"
    ></shopCart>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import { getGoods } from "@/api";
import SupportIco from "@/components/support-ico/support-ico";
import CartControl from "../../components/cart-control/cart-control.vue";
import shopCart from "@/components/shopCart/shopCart";
export default {
  props: {
    seller: {
      type: Object,
    },
  },
  data() {
    return {
      goods: [],
      // currentIndex: 0,
      listHeight: [],
      scorllY: 0,
    };
  },
  created() {
    getGoods().then((res) => {
      console.log(res);
      this.goods = res;
      this._initScroll();
      this.$nextTick(() => {
        //这个函数一定会在页面渲染完成之后执行
        this._initScroll();
        // 计算每个菜单的dom高度
        this._calculateHeight();
      });
    });
  },
  components: {
    SupportIco,
    CartControl,
    shopCart,
  },
  computed: {
    currentIndex() {
      let index = 0;

      for (let i = 0; i < this.listHeight.length; i++) {
        if (this.scorllY >= this.listHeight[i]) {
          if (this.scorllY < this.listHeight[i + 1]) {
            index = i;
            break;
          }
        }
      }
      return index;
    },
    selectFoods() {
      let foods = [];
      this.goods.forEach((item) => {
        item.foods.forEach((food) => {
          if (food.count) {
            foods.push(food);
          }
        });
      });
      console.log(foods);
      return foods;
    },
  },
  methods: {
    _initScroll() {
      this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
        click: false,
        probeType: 3,
        preventDefault: false,
      });
      this.menuScroll = new BScroll(this.$refs.menuWrapper, {
        click: true,
        probeType: 3,
      });
      this.foodsScroll.on("scroll", (pos) => {
        this.scorllY = Math.abs(Math.round(pos.y));
      });
    },
    selectItem(index) {
      // this.currentIndex = index;
      let foodList = this.$refs.foodList;
      let el = foodList[index];
      this.foodsScroll.scrollToElement(el, 300);
    },
    _calculateHeight() {
      let foodList = this.$refs.foodList;
      let height = 0;
      this.listHeight.push(height);
      for (let i = 0; i < foodList.length; i++) {
        let item = foodList[i];
        height += item.clientHeight;
        this.listHeight.push(height);
      }
      console.log(this.listHeight);
    },
  },
};
</script>

<style lang="less">
.goods {
  display: flex;
  position: absolute;
  top: 177px;
  bottom: 46px;
  width: 100%;
  overflow: hidden;
  .menu-wrapper {
    flex: 0 0 80px;
    width: 80px;
    background: #f3f5f7;
    .menu-item {
      display: flex;
      width: 60px;
      height: 54px;
      padding: 0 10px;
      text-align: center;
      justify-content: center;
      align-items: center;
      line-height: 14px;
      font-size: 12px;
    }
    .menu-item.current {
      background: #fff;
      font-weight: 700;
    }
  }
  .foods-wrapper {
    flex: 1;
    .title {
      padding-left: 14px;
      height: 26px;
      line-height: 26px;
      border-left: 2px solid #d9dde1;
      font-size: 12px;
      color: rgb(147, 153, 159);
      background: #f3f5f7;
    }
    .food-item {
      display: flex;
      margin: 18px;
      padding-bottom: 18px;
      position: relative;
      .icon {
        flex: 0 0 57px;
        margin-right: 10px;
        img {
          width: 100%;
        }
      }
      .content {
        flex: 1;
        .name {
          margin: 2px 0 8px 0;
          height: 14px;
          line-height: 14px;
          font-size: 14px;
          color: rgb(7, 17, 27);
        }
        .desc,
        .extra {
          line-height: 10px;
          font-size: 10px;
          color: rgb(147, 153, 159);
        }
        .desc {
          line-height: 12px;
          margin-bottom: 8px;
        }
        .extra {
          .count {
            margin-right: 12px;
          }
        }
        .price {
          font-weight: 700;
          line-height: 24px;
          .now {
            margin-right: 8px;
            font-size: 14px;
            color: rgb(240, 20, 20);
          }
          .old {
            text-decoration: line-through;
            font-size: 10px;
            color: rgb(147, 153, 159);
          }
        }
        .cartcontrol-wrapper {
          position: absolute;
          right: 0;
          bottom: 12px;
        }
      }
    }
    .food-item:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
